<template>
  <div class="draggable-option" v-for="(element, index) in ifRuleList" :key="index">
    <a-row>
      <CloseCircleFilled @click="deleteRe(index)" />
      <a-col :span="24" class="draggable-option-list">
          <div class="draggable-option-item">
            <span class="draggable-option-item-label">条件关系</span>
            <a-select
              v-model:number="element.type"
              show-search
              style="width: 80%"
              placeholder="请选择条件关系"
              :options="conditionalRelation"
              :filter-option="filterOption"
              :getPopupContainer="(triggerNode) => triggerNode.parentNode"
            ></a-select>
          </div>
          <PlusOutlined :style="{ color: 'rgb(75, 100, 241)' }" />
        <template v-if="element.nodeRule">
          <a-button type="link" size="small" @click="add(index)">添加条件</a-button>
          <div v-for="it in element.nodeRule" :key="it" class="draggable-option children-option-list list-rule ">
               <CloseCircleFilled @click="removes(element.nodeRule,index)" />
               <div class="children-option-item">
              <span class="children-option-item-label">字段</span>
              <a-select
                v-model:value="it.columnId"
                show-search
                placeholder="请选择字段"
                style="width: 66%"
                :options="conditionalRelation"
                :filter-option="filterOption"
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                @change="ChangeRelationship(it.columnId)"
              ></a-select>
            </div>
            <div class="children-option-item">
              <span class="children-option-item-label">条件</span>
              <a-select
                v-model:value="it.opt"
                show-search
                placeholder="请选择条件"
                style="width: 66%"
                :options="conditionalRelation1"
                :filter-option="filterOption"
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                 @focus="focus1(it.columnId)"
              ></a-select>
            </div>
            <div class="children-option-item">
              <span class="children-option-item-label">字段值</span>
               <a-input @focus="focus2(it)"  style="width: 66%" v-model:value="it.value" placeholder="请先选择字段/关系"></a-input>
            </div>
          </div>
        </template>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, defineProps } from "vue";
import Draggable from "vuedraggable";
import { conditionalRelation } from "@/components/flowDesign/dicts/show.js";
import { relationship,reload } from "@/components/flowDesign/dicts/utils.js";
import { message } from "ant-design-vue";
import { CloseCircleFilled, PlusOutlined, CloseOutlined } from "@ant-design/icons-vue";
const props = defineProps({
  ifRuleList: {
    type: Array
  },
  lineHeight: {
    type: String,
    default: "50px"
  }
});
const ifRuleList = ref(reload(props.ifRuleList))
const deleteRe = (index) => {
  emit("removeElement", index);
};
// 添加条件
const add = (index) => {
  ifRuleList[index].nodeRule.push({
    columnId: null,
    opt: null, //操作符 > = < != 包含....
    value: null
  });
};
const removes = (element,index) => {
  console.log(element,index);
  element.splice(index,1)
};
//  下拉选框
const conditionalRelation1 = ref([])
const ChangeRelationship = (val)=> {
  conditionalRelation1.value =  relationship()
}
const focus1 = (val)=> {
 if(!val) return message.error('请先选择字段');
}
const focus2 = (val)=> {
 if(val.columnId==undefined||val.columnId==''||val.opt==undefined||val.opt=='') return message.error('请先选择字段和关系');
}
const filterOption = (input, option) => {
  return option.areaName.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
</script>

<style lang="less" scoped>
@var10: #cccccc;
  .anticon-close-circle {
    right: -7px !important;
    top: -7px !important;
    z-index: 1;
  }
  .draggable-option-list {
    padding: 12px 20px !important;
  }
    .children-option-list {
    border: 1px solid @var10;
    border-style: dashed;
    padding: 12px 10px;
    .children-option-item {
      margin-bottom: 10px;
      .children-option-item-label {
        display: inline-block;
        width: 70px;
      }
    }
    .children-option-item-rule {
      span {
        padding-right: 5px;
        margin-right: 15px;
      }
    }
  }
  .list-rule {
    margin-bottom: 20px !important;
  }
</style>
